<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- <script src="http://code.jquery.com/jquery-1.9.1.js"></script> -->

 

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
>

<h:head>
    
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	
	
	<script type="text/javascript">
	
		/* $(function() {
			('#firstdiv').accordion();
			('#seconddiv').accordion();
		}); */

		jQuery(".heading").click(function() {
			jQuery(this).next(".content").slideToggle(500);
		});

		$(document).ready(function() {
			$('.first').hide();
			$('.second').show();

			$('.first').click(function() {
				$('.first').hide();
				$('.second').show();
				return false;
			});

			$('.second').click(function() {
				$('.first').simpleexpand();
				//$('.second').hide();
				return false;
			});
		});
		
	</script>

<style>
.first {
	background-color: #E8EAEB;
	padding: 5px 10px;
}

.second {
	background-color: #E8EAEB;
	padding: 5px 10px;
}

.first:hover {
	background-color: #DFFCCB;
	border: solid #B2FF3A;
	border-width: 1px 0;
	padding-top: 0;
}

.second:hover {
	background-color: #DFFCCB;
	border: solid #B2FF3A;
	border-width: 1px 0;
	padding-top: 0;
}

.heading {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}

p { padding: 5px 0; }

</style>

</h:head>

<h:body>

<div>
<p class=".heading"> First Div -  CLICK..!!!</p>

	<div class="content" id="firstdiv">

<h:dataTable value="#{userBean.getUserList()}" var="u" border="1">

  <h:column>
	<f:facet name="header">
		BookId
	</f:facet>
	#{u.bookId}		
  </h:column>

	<h:column>
	<f:facet name="header">
		Book Title	
	</f:facet>
	 #{u.bookTitle}
	</h:column> 

	<h:column>
		<f:facet name="header">
			Author Name
		</f:facet>
		#{u.author}
	</h:column>
	
	<h:column>
		<f:facet name="header">
			Date Added
		</f:facet>
		#{u.dateAdded}
	</h:column>
</h:dataTable>
</div>
</div>

<h:outputScript library="js" name="common.js" ></h:outputScript>

</h:body>

<br/><br/>
<div>
	<p class=".heading">Second div >>>>>> CLICK</p>

	<div class="content" id="seconddiv">JavaServer Faces (JSF) is a
		UI component based Java Web application framework. JSF is serverbased,
		e.g. the JSF UI components and their state are represented on the
		server with a defined life-cycle of the UI components. JSF is part of
		the Java EE standard.</div>

</div>

</html>




